import React from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../../reducers'
import { actions as UserAction } from '../../../reducers/user'

import moment from 'moment'
import history from '../../../history'

class Authentication extends React.Component {
    componentDidMount() {
        this.props.get_user_info()
    }
    render() {
        const {userInfo} = this.props
        return (
            <div class="role-box">
                <div class="photos">
                    <div class="img"><img src={userInfo.avatar} alt="头像"/></div>
                    <div class="info">
                        <div>{userInfo.nickname}</div>
                        <div>
                            <em>注册时间：</em>
                            <i>{moment(userInfo.created_at).format('LL')}</i>
                        </div>
                        <div>
                            <em>当前评分：</em>
                            <i>{userInfo.rank}</i>
                        </div>
                    </div>
                </div>
                <div class='hr'/>
                <div class="role-list">
                    <div>
                        <div>
                            <p>专家认证</p>
                            <p>拥有专家认证的用户</p>
                        </div>
                        {
                            userInfo.is_expert ? 
                            <div class="lt-c">
                                <button>已通过</button>
                            </div>:
                            userInfo.user_expert? 
                            <div class="lt-b">
                                <button>审核中</button>
                            </div>:
                            <div class="lt-a">
                                <button onClick={()=>history.push('/expert/apply')}>申请</button>
                            </div>
                        }
                        
                    </div>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
      userInfo: state.user.userInfo,
    }
}
  
function mapDispatchToProps(dispatch) {
    return  {
        get_user_info: bindActionCreators(UserAction.get_user_info, dispatch),
    }
}
  
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Authentication)